<template>
  <div>
    
    <!-- <div class="tabs">
      <a href="#/discover">发现音乐</a>
      <a href="#/my">我的</a>
      <a href="#/friends">朋友</a>
    </div> -->
    <div class="tabs">
      <!-- 如果用router-link，两种路由模式都支持跳转 -->
      <!-- 它能实现点谁谁就有类的效果：点谁谁就会自动加两个类：
          router-link-exact-active 和  router-link-active 
      -->
      <router-link to="/discover">发现音乐</router-link>
      <router-link to="/my">我的</router-link>
      <router-link to="/friends">朋友</router-link>
    </div>

    <!-- 显示路由对应组件的地方 -->
    <router-view />

  </div>
</template>

<script>
export default {

}
</script>

<style>

.tabs {

  background-color: #242424;
  height: 40px;
  display: flex;
  align-items: center;
}

.tabs a {

  flex: 1;
  text-align: center;
  color: #fff;
  text-decoration: none;
}

/* 谁有这个类谁文字变红 */
.router-link-active  {
  color: #f00 !important;
}

</style>